import { useMemo, useRef, useState } from 'react';
import { useLocation } from 'react-router-dom';

import { Icon } from '@iconify/react/dist/iconify.js';

// import { ExpandOutlined } from '@ant-design/icons';

const Page: React.FC = () => {
  const location = useLocation();
  console.log('location', location);
  const url = useMemo(() => {
    const arr = [
      {
        pathname: '/product/monitoring/aerialview',
        name: '鸟瞰图',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=鸟瞰图'
      },
      {
        pathname: '/product/monitoring/integration',
        name: '一体化',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=一体化工段1'
      },
      {
        pathname: '/product/monitoring/pretreatment',
        name: '预处理工段',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=预处理工段'
      },
      {
        pathname: '/product/monitoring/biochemicalsection',
        name: '生化工段',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=生化工段'
      },
      {
        pathname: '/product/monitoring/fendun',
        name: '芬顿工段',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=芬顿工段'
      },
      {
        pathname: '/product/monitoring/mbr',
        name: 'MBR工段',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=MBR工段'
      },
      {
        pathname: '/product/monitoring/baf',
        name: 'BAF工段',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=BAF工段'
      },
      {
        pathname: '/product/monitoring/dehydration',
        name: '脱水系统',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=脱水系统'
      },
      {
        pathname: '/product/monitoring/addmedicine',
        name: '加药系统',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=加药系统'
      },
      {
        pathname: '/product/monitoring/fan',
        name: '风机工段',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=风机工段'
      },
      {
        pathname: '/product/monitoring/tankfarm',
        name: '罐区系统',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=罐区系统'
      },
      {
        pathname: '/product/monitoring/deodorization',
        name: '除臭系统',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=除臭系统'
      },
      {
        pathname: '/product/monitoring/electricity',
        name: '电力系统',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=电力系统'
      },
      {
        pathname: '/product/monitoring/meetingdata',
        name: '早调会会前资料',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=早调会会前资料'
      },
      {
        pathname: '/product/dataoverview',
        name: '数据总览',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=数据总览'
      },
      {
        pathname: '/product/dataanalysis',
        name: '数据分析',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=数据分析'
      },
      {
        pathname: '/product/laboratorysamples',
        name: '化验记录',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=化验记录'
      },
      {
        pathname: '/product/report',
        name: '报表管理',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=报表管理'
      },
      {
        pathname: '/product/alarm',
        name: '报警管理',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=报警管理'
      },
      // {
      //   pathname: '/product/alarm/realtime',
      //   name: '实时报警',
      //   url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=实时报警'
      // },
      // {
      //   pathname: '/product/alarm/query',
      //   name: '报警查询',
      //   url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=报警查询'
      // },
      {
        pathname: '/product/pid/pretreatment',
        name: 'PID_预处理工段',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=PID_预处理工段'
      },
      {
        pathname: '/product/pid/biochemicalsection',
        name: 'PID_生化工段',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=PID_生化工段'
      },
      {
        pathname: '/product/pid/mbr',
        name: 'PID_MBR工段',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=PID_MBR工段'
      },
      {
        pathname: '/product/pid/fendun',
        name: 'PID_芬顿工段',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=PID_芬顿工段'
      },
      {
        pathname: '/product/pid/baf',
        name: 'PID_BAF工段',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=PID_BAF工段'
      },
      {
        pathname: '/product/pid/dehydration',
        name: 'PID_脱水系统',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=PID_脱水系统'
      },
      {
        pathname: '/product/pid/deodorization',
        name: 'PID_除臭系统',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=PID_除臭系统'
      },
      {
        pathname: '/equipment/equipmentanalysis',
        name: '设备分析',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=设备分析'
      },
      {
        pathname: '/equipment/overviewequipment',
        name: '设备总览',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=设备总览'
      },
      {
        pathname: '/safety/monitoring',
        name: '视频监控',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=视频监控'
      },
      {
        pathname: '/repertory/product/storage',
        name: '入库记录',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=原料入库记录'
      },
      {
        pathname: '/repertory/product/warehousing',
        name: '原料入库',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=原料入库'
      },
      {
        pathname: '/repertory/product/rawmaterial',
        name: '原料出库',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=原料出库'
      },
      {
        pathname: '/repertory/product/stockremoval',
        name: '出库记录',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=原料出库记录'
      },
      {
        pathname: '/repertory/product/statistics',
        name: '库存统计',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=库存统计'
      },
      {
        pathname: '/repertory/product/inventorycheck',
        name: '库存盘点',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=库存盘点'
      },
      {
        pathname: '/cockpit/cockpit',
        name: '生产管理驾驶舱',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=homepage'
      },
      {
        pathname: '/cockpit/equipment',
        name: '设备管理驾驶舱',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=设备管理驾驶舱'
      },
      {
        pathname: '/cockpit/safety',
        name: '安全环保管理驾驶舱',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=安全环保管理驾驶舱'
      },
      {
        pathname: '',
        name: '安全器材管理',
        url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=安全器材管理'
      }
    ];
    const baseUrl = arr?.filter((item) => item?.pathname === location?.pathname)?.[0]?.url;
    return `${baseUrl}&access_token=${localStorage.getItem('token')}`;
  }, [location?.pathname]);

  console.log('url', url);

  const iframeRef = useRef<HTMLIFrameElement>(null);
  const [fullScreen, setFullScreen] = useState(false);

  const handleFullScreen = () => {
    console.log('fullScreen:', fullScreen);
    setFullScreen(!fullScreen);

    //ifrome进入全屏模式
    if (iframeRef.current) {
      iframeRef.current.requestFullscreen();
    }
  };

  return (
    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
      <div
        style={{
          position: 'absolute',
          zIndex: 100,
          right: '10px',
          fontSize: '20px',
          cursor: 'pointer'
        }}
        onClick={handleFullScreen}
      >
        <Icon style={{ color: '#f6ac2d' }} icon="ri:fullscreen-fill" />
      </div>
      <iframe
        src={url}
        width={'100%'}
        height={'100%'}
        style={{ minHeight: '500px' }}
        ref={iframeRef}
      ></iframe>
    </div>
  );
};

export default Page;
